<template>
  <div class="the-header">
    <div class="header-logo" @click="goHome">
      <svg class="icon">
        <use xlink:href = "#icon-erji"></use>
      </svg>
      <span>music</span>
    </div>  
    <ul class="navbar">
      <li :class="{active: item.name == activeName}" v-for="item in navMsg" :key="item.path" @click="goPage(item.path,item.name)"> 
        {{item.name}}
      </li>
      <li>
        <div class="header-search">
          <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
          <div class="search-btn" @click="goSearch()">
            <svg class="icon">
              <use xlink:href = "#icon-sousuo"></use>
            </svg>
          </div>
        </div>
      </li>
      <li v-show="!loginIn" :class="{active: item.name == activeName}" v-for="item in loginMsg" :key="item.path" @click="goPage(item.path,item.name)"> 
        {{item.name}}
      </li>
    </ul>
    <div class="header-right" v-show="loginIn">
      <div id="user">
        <img :src="attachImageUrl(avator)">
      </div>
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)"> 
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import {navMsg,loginMsg,menuList} from '../assets/data/header';
import globalBus from '@/utils/global-bus'
export default {
    name: 'the-header',
    components: {},
    props: {},
    data () {
      return {
        navMsg: [],   // 左侧导航栏
        keywords: '', // 搜索关键字
        loginMsg: [], // 右侧导航栏 
        menuList: [], // 用户下拉菜单
      }
    },
    computed: {
      ...mapGetters([
        'activeName', // 选择的菜单名
        'loginIn',    // 是否登录
        'avator',     // 用户头像
      ])
    },
    watch: {},
    created () {
      this.navMsg = navMsg;
      this.loginMsg = loginMsg;
      this.menuList = menuList;
    },
    mounted() {
      document.querySelector('#user').addEventListener('click',function(e){
        document.querySelector('.menu').classList.add("show");
        e.stopPropagation();  // 阻止冒泡
      },false);
      document.querySelector('.menu').addEventListener('click',function(e){
        e.stopPropagation();  // 点击菜单内部时，阻止冒泡，这样点击内部时菜单就不会消失
      },false);
      document.addEventListener('click',function() {
        document.querySelector('.menu').classList.remove("show");
      },false);
    },
    methods: {
      // 提示信息
      notify(title,type) {
        this.$notify({
          title: title,
          type: type
        })
      },
      // 首页导航
      goHome() {
        this.$router.push({
          path: "/"
        })
      },
      // 页面导航
      goPage(path,name) {
        if(path == '/sign-up') {
          globalBus.$emit('toggle', false)
        } else{
          globalBus.$emit('toggle', true)
        }
        if(!this.loginIn && path == '/my-music'){
          this.notify('请先登录','warning');
        } else {
          this.$store.commit('setActiveName',name);
          this.$router.push({path: path});
        }
      },
      // 歌曲查询
      goSearch() {
        this.$router.push(
          {path:"/search",query:{keywords:this.keywords}}
        )
      },
      // 获取头像地址
      attachImageUrl(url) {
        return url ? this.$store.state.configure.HOST + url : '@/assets/img/user.jpg';
      },
      // 个人设置和退出导航
      goMenuList(path){
        if(path == 0) {
          this.$store.commit('setLoginIn',false);
          this.$router.go(0); // 刷新当前页面
        } else {
          this.$router.push(
            {path: path}
          );
        }
      }
    }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/the-header.scss';
</style>
